 import React, { Component } from 'react'
 import { NavLink } from 'react-router-dom'
 import './tab_bottom.scss'

 const tabItems = [
    {
        title: '用车',

        activeIcon:require('./tabbar_yongche_selected@3x.png'),
        inactiveIcon: require('./tabbar_yongche_normal@3x.png'),
        to:'Home'
    }
//     ,
//    {
//         title: '受理',
//         activeIcon: require('./tabbar_shouli_selected@3x.png'),
//         inactiveIcon:require('./tabbar_shouli_normal@3x.png'),
//         to:'Handle'
//     },
//     {
//         title: '调度',
//         activeIcon: require('./tabbar_diaodu_selected@3x.png'),
//         inactiveIcon: require('./tabbar_diaodu_normal@3x.png'),
//         to:'Dispatch'
//     },
//    {
//         title: '驾驶',
//         activeIcon: require('./tabbar_jiashi_selected@3x.png'),
//         inactiveIcon: require('./tabbar_jiashi_normal@3x.png'),
//         to:'Drive'
//     },
];
 class TabBottom extends React.Component{
     constructor(props){
         super(props)
         this.state={
            activeIndex:0
         }
         this._isActive=this._isActive.bind(this)
         this.selectTab=this.selectTab.bind(this)
     }
     _isActive(match, location){
       
        if(match!=null){
            console.log(match);
        }
     }
     selectTab(index,name){
        this.setState({
            activeIndex:index
        })
        this.props.selectAction({index,name});
     }
     render(){
         return(
             <ul className="tab-bottom">
                  {tabItems.map((item,index)=>{
                  return <li  className={this.state.activeIndex==index?"active":""} key={index} onClick={()=>this.selectTab(index,item.to)}>
                              <img  src={this.state.activeIndex==index?item.activeIcon:item.inactiveIcon}/>
                              <span>{item.title}</span>
                         </li>
                   })}
             </ul>
         )
     }
 }

export default TabBottom